<template>
    <div class="goodsList">
        <template v-if="data.isVideo">
            <div class="goods" v-for="item in data.data" :key="item.comment_id">
                <i class="iconfont" v-if="data.isVideo || false">&#xe613;</i>
                <img :src="item.goods_img" alt="" style="width: 47.0667vw; height: 47.3333vw;">
                <span class="title">{{ item.goods_name }}</span>
                <div class="info" style="height: 5.8667vw;">
                    <span class="userImg">
                        <img :src="item.logo_thumb" alt="">
                        {{ item.shop_name }}
                    </span>
                    <span class="lookCount">
                        <i class="iconfont">&#xe617;</i>
                        {{ item.look_num }}
                    </span>
                </div>
            </div>
        </template>
        <template v-else>
            <div class="goods" v-for="item in data.data" :key="item.comment_id">
                <i class="iconfont" v-if="data.isVideo || false">&#xe613;</i>
                <img :src="item.img" alt="">
                <span class="title">{{ item.goods_name }}</span>
                <div class="info">
                    <span class="userImg">
                        <img :src="item.user_picture" alt="">
                        {{ item.user_name }}
                    </span>
                    <span class="lookCount">
                        <i class="iconfont">&#xe617;</i>
                        {{ item.dis_browse_num }}
                    </span>
                </div>
            </div>
        </template>
        <div class="nomore" v-if="data.isNoMore">
            没有更多了
        </div>
    </div>
</template>

<script>
export default {
    props: ["data"],
}
</script>

<style scoped>

.goodsList {
    width: 94.6667vw;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 0 auto;
    gap: 2.6667vw;
}

.goods {
    width: 45.8667vw;
    border-radius: 2.6667vw;
    overflow: hidden;
    display: flex;
    background-color: #fff;
    flex-direction: column;
    position: relative;
    /* gap: 2.6667vw; */

    >img {
        width: 46.1333vw;
        height: 63.4667vw;
    }
    >i.iconfont{
        position: absolute;
        font-size: 5.3333vw;
        left: 2.6667vw;
        top: 2.6667vw;
        opacity: 0.8;
    }
}

.title {
    width: 170px;
    height: 11.7333vw;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 6.4vw;
    font-size: 3.7333vw;
    padding: 0 2.6667vw ;
    box-sizing: border-box;
    text-align: left;
    margin: 2.6667vw 0;
}

.info {
    display: flex;
    justify-content: space-between;
    height: 11.7333vw;
    padding: 2.6667vw;

    .userImg {
        height: 11.7333vw;
        width: 26.6667vw;
        line-height: 5.8667vw;
        font-size: 3.2vw;
        display: flex;
        gap: .5333vw;

        img {
            width: 5.8667vw;
            height: 5.8667vw;
            border-radius: 50%;
            vertical-align: top;
        }
    }

    .lookCount {
        font-size: 3.2vw;
        height: 5.8667vw;
        line-height: 5.8667vw;
        color: #ccc;

        i.iconfont {
            font-size: 3.2vw;
        }
    }
}
.nomore {
    font-size: 5.3333vw;
    color: #ccc;
}
</style>